<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/registry/new-york-v4/lib/utils"
import { Button } from "@/registry/new-york-v4/ui/button"
import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/registry/new-york-v4/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/registry/new-york-v4/ui/input-otp"

const props = defineProps<{
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div :class="cn('flex flex-col gap-6 md:min-h-[450px]', props.class)">
    <Card class="flex-1 overflow-hidden p-0">
      <CardContent class="grid flex-1 p-0 md:grid-cols-2">
        <form class="flex flex-col items-center justify-center p-6 md:p-8">
          <FieldGroup>
            <Field class="items-center text-center">
              <h1 class="text-2xl font-bold">
                Enter verification code
              </h1>
              <p class="text-muted-foreground text-sm text-balance">
                We sent a 6-digit code to your email
              </p>
            </Field>
            <Field>
              <FieldLabel for="otp" class="sr-only">
                Verification code
              </FieldLabel>
              <InputOTP
                id="otp"
                :maxlength="6"
                required
                container-class="gap-4"
              >
                <InputOTPGroup>
                  <InputOTPSlot :index="0" />
                  <InputOTPSlot :index="1" />
                  <InputOTPSlot :index="2" />
                </InputOTPGroup>
                <InputOTPSeparator />
                <InputOTPGroup>
                  <InputOTPSlot :index="3" />
                  <InputOTPSlot :index="4" />
                  <InputOTPSlot :index="5" />
                </InputOTPGroup>
              </InputOTP>
              <FieldDescription class="text-center">
                Enter the 6-digit code sent to your email.
              </FieldDescription>
            </Field>
            <Field>
              <Button type="submit">
                Verify
              </Button>
              <FieldDescription class="text-center">
                Didn't receive the code? <a href="#">Resend</a>
              </FieldDescription>
            </Field>
          </FieldGroup>
        </form>
        <div class="bg-muted relative hidden md:block">
          <img
            src="/placeholder.svg"
            alt="Image"
            class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
          >
        </div>
      </CardContent>
    </Card>
    <FieldDescription class="text-center">
      By clicking continue, you agree to our <a href="#">Terms of Service</a>
      and <a href="#">Privacy Policy</a>.
    </FieldDescription>
  </div>
</template>
